<script setup lang="ts">
import { ref, watch } from "vue";
import useCategoryStore from "@/store/modules/category";
import { reqGetSpuList, reqGetSkuList, deleteSpu } from "@/api/product/spu";
import { getSpuListResponseData, recordsData } from "@/api/product/spu/type";
import SpuForm from "./spuForm.vue";
import SkuForm from "./skuForm.vue";
import { ElMessage } from "element-plus";
const categoryStore = useCategoryStore();
// 控制分页器一页数据的条数
let pageSize = ref<number>(3);
// 控制分页器的当前页数
let pageNo = ref<number>(1);
// 控制分页器的总数据条数
let total = ref<number>(0);
// SPU列表(el-table)要展示数据(data)所需要的字段(是一个数组)
let spuList = ref<recordsData>([]);
// 控制场景切换的字段
let scene = ref<number>(0);
// 给spuFrom组件打的标识，用于操作子组件的方法和属性
let spu = ref<any>();
// 给skuFrom组件打的标识，用于操作子组件的方法和属性
let sku = ref<any>();
// sku列表
let skuList = ref<any[]>([]);
// 控制dialog会话框显示与隐藏的字段
let show = ref<boolean>(false);
// watch函数监视category
watch(
  () => categoryStore.c3Id,
  () => {
    // 从有到无
    if (categoryStore.c3Id == "") return;
    // 从无到有
    getSpuList();
  }
);
// 封装出一个获取SPU列表的函数
let getSpuList = async (pager = 1) => {
  pageNo.value = pager;
  let res: getSpuListResponseData = await reqGetSpuList(
    pageNo.value,
    pageSize.value,
    categoryStore.c3Id
  );
  if (res.code == 200) {
    spuList.value = res.data.records;
    total.value = res.data.total;
  }
};
// 每页数据条数发生变化时的回调
const sizeChangeHandler = (value: number) => {
  getSpuList();
};
// 点击添加SPU按钮的回调
const addSpu = () => {
  scene.value = 1;
  spu.value.initAddSpu(categoryStore.c3Id);
};
// 点击修改SPU按钮的回调
const updateSpu = (row: any) => {
  scene.value = 1;
  spu.value.initSpu(row);
};
// 父给子传递的自定义事件回调
const updataScene = (_scene: number) => {
  scene.value = _scene;
  // 重新获取spu列表数据
  getSpuList();
};
// 点击添加sku按钮的回调
const addSku = (row: any) => {
  scene.value = 2;
  // 初始化skuForm组件的数据
  sku.value.initSkuData(
    categoryStore.c1Id,
    categoryStore.c2Id,
    categoryStore.c3Id,
    row
  );
};
// 点击查看sku列表按钮的回调
const handleLook = async (spu: any) => {
  let res: any = await reqGetSkuList(spu.id);
  if (res.code == 200) {
    skuList.value = res.data;
    show.value = true;
  } else {
    ElMessage({
      type: "error",
      message: "查看sku列表失败",
    });
  }
};
// popconfirm确定的回调
const handleConfirm = async (row: any) => {
  let res: any = await deleteSpu(row.id);
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: "删除spu成功",
    });
    // 重新获取spu列表
    getSpuList(spuList.value.length == 1 ? pageNo.value - 1 : pageNo.value);
  } else {
    ElMessage({
      type: "error",
      message: "系统数据,无法删除",
    });
  }
};
</script>
<template>
  <div>
    <category :scene="scene" />
    <el-card style="margin: 10px 0">
      <div v-show="scene == 0">
        <el-button
          type="primary"
          icon="Plus"
          @click="addSpu"
          :disabled="categoryStore.c3Id ? false : true"
          v-have="`btn.Spu.add`"
          >添加SPU</el-button
        >
        <el-table border style="margin: 10px 0" :data="spuList">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80px"
          ></el-table-column>
          <el-table-column label="SPU名称" prop="spuName"></el-table-column>
          <el-table-column
            label="SPU描述"
            prop="description"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="SPU操作">
            <template v-slot="{ row, $index }">
              <el-button
                type="primary"
                icon="Plus"
                title="添加SKU"
                @click="addSku(row)"
                v-have="`btn.Spu.addsku`"
              ></el-button>
              <el-button
                type="warning"
                icon="Edit"
                title="修改SPU"
                @click="updateSpu(row)"
                v-have="`btn.Spu.update`"
              ></el-button>
              <el-button
                type="info"
                icon="View"
                title="查看SKU列表"
                @click="handleLook(row)"
                v-have="`btn.Spu.skus`"
              ></el-button>
              <el-popconfirm
                :title="`您确定要删除${row.spuName}吗?`"
                width="200px"
                icon="Delete"
                @confirm="handleConfirm(row)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    icon="Delete"
                    title="删除SPU"
                    v-have="`btn.Spu.delete`"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- @current-change的事件回调会注入当前的页码数,@size-change的事件回调不能直接写getSpuList，因为也会注入一个参数，值为当前每页的数据条数 -->
        <el-pagination
          v-model:current-page="pageNo"
          :background="true"
          v-model:page-size="pageSize"
          :page-sizes="[3, 5, 7]"
          layout="prev, pager, next,jumper, ->,sizes, total"
          :total="total"
          @current-change="getSpuList"
          @size-change="sizeChangeHandler"
        >
        </el-pagination>
      </div>
      <SpuForm v-show="scene == 1" ref="spu" @updataScene="updataScene" />
      <SkuForm v-show="scene == 2" ref="sku" @updataScene="updataScene" />
      <el-dialog v-model="show">
        <el-table border :data="skuList">
          <el-table-column label="sku名称" prop="skuName"></el-table-column>
          <el-table-column label="sku价格" prop="price"></el-table-column>
          <el-table-column label="sku重量" prop="weight"></el-table-column>
          <el-table-column label="sku图片">
            <template v-slot="{ row, $index }">
              <img
                :src="row.skuDefaultImg"
                alt=""
                style="height: 100px; weight: 100px"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<style scoped></style>
